#app 
    .main-wrapper 
        height: calc(100% - 60px)
        overflow: -Scroll
        overflow-y: hidden
    .main-container
        height: 100%
        transition: margin-left .28s
        margin-left: $sideBarWidth
        position relative;
        overflow: -Scroll
        overflow-y: hidden
        box-sizing: border-box
    .sidebar-container
        transition: width 0.28s
        width: $sideBarWidth !important
        background: #ffffff
        // background-color: $menuBg
        height 100%
        border-right: 1px solid #f1f1f1
        position: absolute
        font-size: 0px
        top: 60px
        bottom 0
        left 0
        z-index 1001
        overflow hidden
        //reset element-ui css
        .horizontal-collapse-transition
            transition: 0s width ease-in-out ,0s padding-left ease-in-out, 0s padding-right ease-in-out
        .scrollbar-wrapper
            overflow-x: hidden !important
            padding-bottom: 80px
        .el-scrollbar_bar.is-vertical 
            right 0
        .el-scrollbar
            height 100%
        .is-horizontal
            display: none
        a 
            display: inline-block
            width: 100%
            overflow hidden
        .svg-icon
            margin-right: 16px
        .el-menu
            border: 0
            height 100%
            width 100% !important
        //menu hover
        .submenu-title-noDropdown,
        .el-submenu_title 
            &:hover 
                background-color: $menuHover !important
        .is-active>.el-submen_title
            color: $subMenuActiveText !important
        & .nest-menu .el-submenu>.el-submenu_title,
        & .el-submenu .el-menu-item 
            min-width $sideBarWidth !important
            background-color: $subMenuBg !important

            &:hover 
                background-color: $subMenuHover !important
